<template>
  <div class="box1">
    <ul>
      <li>
        <img :src="image.img2" alt="">
        <div class="text"></div>
      </li>
      <li>
        <img :src="image.img3" alt="">
        <div class="text"></div>
      </li>
      <li>
        <img :src="image.img4" alt="">
        <div class="text"></div>
      </li>
      <li>
        <img :src="image.img5" alt="">
        <div class="text"></div>
      </li>
      <li>
        <img :src="image.img6" alt="">
        <div class="text"></div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import router from "@/router";
  import request from "@/utils/request";

  let image = ref({
    img2: "src/static/image/2.jpg",
    img3: "src/static/image/3.jpg",
    img4: "src/static/image/4.jpg",
    img5: "src/static/image/5.jpg",
    img6: "src/static/image/6.jpg",
  });

  let drawer = ref(false);

  let login = ref("未登录");

  const goToLogin = () => {
    router.push({
      path: "/login",
    });
  };

  const openSide = () => {
    drawer.value = true;
  };
  // Vue3的生命周期钩子
  onMounted(() => { });
</script>

<style scoped>
  li {
    list-style: none;
  }

  .box1 {
    display: flex;
    height: 100vh;
    min-width: 1519.2px;
    min-height: 340px;
    transition: all .3s;
    overflow: hidden;
  }

  .box1 li {
    float: left;
    position: relative;
    width: 20%;
    transition: all .3s;
  }

  .box1 li img {
    height: 100%;
  }

  .box1 li .text {
    position: absolute;
    writing-mode: sideways-lr;
    writing-mode: vertical-lr;
    left: 23%;
    top: 20%;
    color: aliceblue;
    font-size: 20px;

  }

  .box1:hover li {
    width: 254px;
  }

  .box1 li:hover {
    width: 500px;
  }
</style>